<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="assets/agile/css/flat/flat.component.css">
		<link rel="stylesheet" href="assets/agile/css/flat/flat.color.css">
		<link rel="stylesheet" href="assets/agile/css/flat/iconline.css">
		<link rel="stylesheet" href="assets/app/css/app.css">
	</head>
	<body>
		<div id="section_container">
			<section id="agiletemplate_section" data-role="section" class="active">
				<header>
				    <div class="titlebar">
				    	<a data-toggle="close" href="#slideup"><i class="iconfont iconline-arrow-left"></i></a>
				    	<h1>Agile的Template</h1>
				    </div>
				</header>
				<article data-role="article" id="main_article" data-scroll="pull" class="active" style="top:44px;bottom:0px;">
					<div class="scroller">  
						<ul id="content" class="listitem">
							<li class="sliver">介绍</li>
							<li>
								Agile Template是基于artTemplate的模板注入封装
							</li>
							<li class="sliver">基本用法</li>
							<li>
								A.template('#templateId').renderReplace|renderBefore|renderAfter(url|data,callback);
							</li>
							<li class="sliver">下拉或上拉刷新查看效果</li>
							<script id="template" type="text/html">
							    <% for (i = 0; i < list.length; i ++) { %>
							        <li>条目内容 <%= i + 1 %> ：<%= list[i] %></li>
							    <% } %>
							</script>
						</ul>
    				</div>
				</article>
			</section>
		</div>
		
		<!--- third --->
		<script src="assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="assets/third/iscroll/iscroll-probe.js"></script>
		<script src="assets/third/arttemplate/template-native.js"></script>	
		<!-- agile -->
		<script type="text/javascript" src="assets/agile/js/agile.js"></script>		
		<!--- bridge --->
		<script type="text/javascript" src="assets/bridge/exmobi.js"></script>
		<script type="text/javascript" src="assets/bridge/agile.exmobi.js"></script>
		<!-- app -->
		<script type="text/javascript" src="assets/app/js/app.js"></script>
		<script>
			$('#main_article').on('refreshInit', function(){
				//首次进来加载使用replace
				//A.template('#template').renderReplace('${$config.exmobiSevice}/render');
				A.template('#template').renderReplace('json/template.json');
				
				var refresh = A.Refresh('#main_article');
				refresh.on('pulldown', function(){
					//下拉刷新加载到前面用before
					A.template('#template').renderBefore({list:['Agile Lite移动前端框架', 'ExMobi三大引擎完美融合']},function(h){
						refresh.refresh();
					});
				});
				refresh.on('pullup', function(){
					//上拉刷新加载到后面用after
					A.template('#template').renderAfter({list:['Agile Lite移动前端框架', 'ExMobi三大引擎完美融合']}, function(){
						refresh.refresh();
					});
				});
			});
			
		</script>
	</body>
</html>